এইচটিএমএল ছবি
ছবিগুলি একটি ওয়েব পৃষ্ঠার নকশা এবং চেহারা উন্নত করে৷
img1.png
এটি img1.png নামের একটি ছবির উদাহরণ। ছবি আপনার ওয়েব পেজ আকর্ষণীয় করে তোলে!
উদাহরণ:
HTML চিত্রের সিনট্যাক্স
HTML <img> ট্যাগটি একটি ওয়েব পেজে একটি ছবি এম্বেড করতে ব্যবহৃত হয়।
ছবি টেকনিক্যালি ওয়েব পেজ এম্বেড করা হয় না; ছবি ওয়েব পেজ লিঙ্ক করা হয়. <img> ট্যাগ নির্দিষ্ট ছবির জন্য স্থান তৈরি করে।
গুরুত্বপূর্ণ নোট:
<img> ট্যাগটি খালি, এটিতে শুধুমাত্র বৈশিষ্ট্য রয়েছে এবং কোন ক্লোজিং ট্যাগ নেই।
<img> ট্যাগের দুটি প্রয়োজনীয় বৈশিষ্ট্য রয়েছে:
src বৈশিষ্ট্য
ছবির পাথ (URL) নির্দিষ্ট করে
alt বৈশিষ্ট্য
ছবির জন্য Alt টেক্সট নির্দিষ্ট করে
সিনট্যাক্স
<img src="url" alt="alternatetext">src বৈশিষ্ট্য
প্রয়োজনীয় src বৈশিষ্ট্য চিত্রটির পাথ (URL) নির্দিষ্ট করে।
দ্রষ্টব্য:
যখন একটি ওয়েব পৃষ্ঠা লোড করা হয়, তখন ব্রাউজার নিজেই ওয়েব সার্ভার থেকে ছবিটি নিয়ে আসে এবং এটি পৃষ্ঠায় সন্নিবেশিত করে। সুতরাং, নিশ্চিত করুন যে ছবিটি আসলে ওয়েব পৃষ্ঠার সাথে একই অবস্থানে রয়েছে, অন্যথায় আপনার দর্শকরা একটি ভাঙা লিঙ্ক আইকন পাবেন।
উদাহরণ
<img src="img_chania.jpg" alt="Flowers in Chania">চেষ্টা করুন:
চিত্রটি উপলব্ধ না হলে কী হবে:
যদি ব্রাউজার ছবিটি খুঁজে না পায় তবে এটি alt বৈশিষ্ট্যের মান প্রদর্শন করবে
alt বৈশিষ্ট্য
প্রয়োজনীয় alt অ্যাট্রিবিউট কোনও ইমেজের জন্য বিকল্প টেক্সট প্রদান করে যদি কোনও কারণে ব্যবহারকারী এটি দেখতে না পারে (একটি ধীর সংযোগের কারণে, src অ্যাট্রিবিউটে একটি ত্রুটি বা ব্যবহারকারী যদি স্ক্রিন রিডার ব্যবহার করে)।
Alt অ্যাট্রিবিউটের মান চিত্রটি বর্ণনা করতে হবে:
উদাহরণ
<img src="img_chania.jpg" alt="Flowers in Chania">যখন ছবি পাওয়া যায় না:
<img src="wrongname.gif" alt="Flowers in Chania">স্ক্রিন রিডার সম্পর্কে:
একটি স্ক্রিন রিডার হল একটি সফ্টওয়্যার প্রোগ্রাম যা HTML কোড পড়ে এবং ব্যবহারকারীকে বিষয়বস্তু "শুনার" অনুমতি দেয়। স্ক্রীন রিডারগুলি দৃষ্টি প্রতিবন্ধী বা শেখার অক্ষমতাযুক্ত ব্যক্তিদের জন্য উপযোগী।
ছবির আকার - প্রস্থ এবং উচ্চতা
আপনি চিত্রের প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে শৈলী বৈশিষ্ট্য ব্যবহার করতে পারেন।
উদাহরণ 1: শৈলী বৈশিষ্ট্য সহ
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">উদাহরণ 2: প্রস্থ এবং উচ্চতা বৈশিষ্ট্য সহ
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি সর্বদা পিক্সেলে চিত্রের প্রস্থ এবং উচ্চতা নির্ধারণ করে।
গুরুত্বপূর্ণ নোট:
সর্বদা ছবির প্রস্থ এবং উচ্চতা নির্দিষ্ট করুন। যদি প্রস্থ এবং উচ্চতা নির্দিষ্ট করা না থাকে, ছবি লোড করার সময় ওয়েব পৃষ্ঠাটি চিৎকার করতে পারে।
Width and Height, or Style?
প্রস্থ, উচ্চতা এবং শৈলী বৈশিষ্ট্য সব HTML এ বৈধ।
যাইহোক, আমরা শৈলী বৈশিষ্ট্য ব্যবহার করার পরামর্শ দিই। এটি স্টাইল শীটগুলিকে চিত্রের আকার পরিবর্তন করতে বাধা দেয়:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>বিভিন্ন আকারের ছবি:
বিভিন্ন জায়গায় ছবি
সাবফোল্ডারে ছবি
যদি আপনার ছবিগুলি একটি সাবফোল্ডারে থাকে, তাহলে src অ্যাট্রিবিউটে ফোল্ডারের নাম যোগ করুন:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">অন্য সার্ভারে ছবি
কিছু ওয়েবসাইট অন্য সার্ভারে একটি চিত্র নির্দেশ করে।
<img src="https://www.jassifteam.com/images/logo.jpg" alt="Jassif Team Logo">বাহ্যিক চিত্রগুলিতে নোট:
বহিরাগত ছবি কপিরাইট অধীনে হতে পারে. আপনি এটি ব্যবহার করার অনুমতি না পেলে, আপনি কপিরাইট আইন লঙ্ঘন করতে পারেন. উপরন্তু, আপনি বহিরাগত ছবি নিয়ন্ত্রণ করতে পারবেন না; এগুলি হঠাৎ করে মুছে ফেলা বা পরিবর্তন করা যেতে পারে।
বিশেষ ধরনের ইমেজ
অ্যানিমেটেড ফিল্ম
এইচটিএমএল অ্যানিমেটেড জিআইএফ-এর অনুমতি দেয়:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">ছবি সংযুক্ত
একটি লিঙ্ক হিসাবে একটি ছবি ব্যবহার করতে, <a> ট্যাগের ভিতরে <img> ট্যাগ রাখুন:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>ভাসমান ছবি
পাঠ্যের ডান বা বাম দিকে চিত্রটি ভাসতে CSS ফ্লোট বৈশিষ্ট্য ব্যবহার করুন:
ডানদিকে ভাসমান:
এই চিত্রটি পাঠ্যের ডানদিকে ভাসবে। সিএসএস ফ্লোট অ্যাট্রিবিউট হল টেক্সটে ইমেজ যোগ করার একটি দুর্দান্ত উপায়। যখন ছবিটি ভাসবে, পাঠ্যটি তার চারপাশে প্রবাহিত হবে।
বাম দিকে ভাসমান:
এই চিত্রটি পাঠ্যের বাম দিকে ভাসবে। CSS ফ্লোট অ্যাট্রিবিউট হল একটি শক্তিশালী টুল যা সাধারণত ওয়েব ডিজাইনে ব্যবহৃত হয়। এটি বিষয়বস্তু সংগঠিত করতে সাহায্য করে।
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> চিত্রটি পাঠ্যের ডানদিকে ভাসবে৷</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> চিত্রটি পাঠ্যের বাম দিকে ভাসবে৷</p>৷পরামর্শ:
CSS ফ্লোট সম্পর্কে আরও জানতে আমাদের CSS Float টিউটোরিয়াল পড়ুন।
সাধারণ চিত্র বিন্যাস
এখানে সব ব্রাউজার (Chrome, Edge, Firefox, Safari, Opera) দ্বারা সমর্থিত সর্বাধিক সাধারণ চিত্র ফাইলের ধরন রয়েছে:
| সারাংশ | ফাইল বিন্যাস | ফাইল এক্সটেনশন |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
JPEG
ছবির জন্য
.jpg, .jpeg
PNG
স্বচ্ছ ব্যাকগ্রাউন্ডের জন্য
.png
GIF
অ্যানিমেশন জন্য
.gif
SVG
ভেক্টর ইমেজ জন্য
.svg
অধ্যায়ের সারাংশ
দ্রষ্টব্য:
বড় ছবিগুলি লোড হতে সময় নেয় এবং আপনার ওয়েব পৃষ্ঠাকে ধীর করে দিতে পারে৷ সাবধানে ছবি ব্যবহার করুন.
অনুশীলন করুন
একটি ইমেজ যোগ করার জন্য সঠিক HTML উপাদান কি?
এইচটিএমএল ইমেজ ট্যাগ
| ট্যাগ | ব্যাখ্যা |
|---|---|
| <img> | একটি চিত্র সংজ্ঞায়িত করে |
| <map> | একটি চিত্র মানচিত্র সংজ্ঞায়িত করে |
| <area> | একটি চিত্র মানচিত্রের ভিতরে ক্লিকযোগ্য এলাকা সংজ্ঞায়িত করে |
| <picture> | একাধিক চিত্র সম্পদের জন্য একটি ধারক সংজ্ঞায়িত করে |
দ্রষ্টব্য:
সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।